<template>
	<u-navbar :titleWidth="titleWidth" :autoBack="false" :titleStyle="titleStyle" :bgColor="bgColor"
		:title="navbarTitle" :placeholder="placeholder" :border="border" :fixed="fixed" @leftClick="leftClick">
		<view slot="left">
			<u-icon bold :name="singlePage ? 'home' : 'arrow-left'" size="42rpx" color="#111111"></u-icon>
		</view>
		<view slot="right">
			<slot name="right"></slot>
		</view>
	</u-navbar>
</template>

<script>
	export default {
		props: {
			showTitle: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			placeholder: {
				type: Boolean,
				default: true
			},
			border: {
				type: Boolean,
				default: false
			},
			autoBack: {
				type: Boolean,
				default: false
			},
			fixed: {
				type: Boolean,
				default: true
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			titleWidth: {
				type: [String, Number],
				default: ''
			},
		},
		computed: {
			navbarTitle() {
				return this.showTitle ? (this.title || this.$Route.meta.title) : ''
			},
			singlePage() {
				return uni.$u.pages().length === 1
			}
		},
		mounted() {
			const height = Number((44 + uni.$u.sys().statusBarHeight).toFixed(0))
			this.$emit('height', height)
		},
		data() {
			return {
				titleStyle: {
					fontWeight: '600',
				}
			}
		},
		methods: {
			leftClick() {
				if (this.singlePage) this.goHome()
				else this.goBack()
			},
			goHome() {
				this.$Router.replaceAll({
					path: '/'
				});
			},
			goBack() {
				this.$Router.back()
			}
		}
	}
</script>